<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-25 08:38:18
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-03-04 13:06:09
 * @FilePath: \vite-project\src\components\echarts-map\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="resource-map">
    <div class="resource-map__view">
      <h1 class="map-name">{{ mapData.name }}</h1>
      <p class="map-text">{{ mapData.titleText }}</p>
      <div class="map-output" @click="isShow = !isShow">
        <div class="map-output__view"></div>
        <div class="map-output__view">
          <StatiStic v-if="isShow" :num="output.capacity" :isShow="isShow" />
          <span class="map-output__view--name"
            >{{ `${mapMame === "china" ? "产能(万吨)" : "产值(亿元)"}` }}
          </span>
        </div>
        <div class="map-output__view">
          <StatiStic
            v-if="isShow"
            :num="output.outputValue"
            :isShow="isShow"
            :suffixShow="mapMame !== 'china' && true"
          />
          <span class="map-output__view--name">
            {{ `${mapMame === "china" ? "产值(万元)" : "占比"}` }}
          </span>
        </div>
        <div class="map-output__view">
          <StatiStic
            v-if="isShow"
            :num="output.processingQuantity"
            :suffixShow="mapMame !== 'china' && true"
            :isShow="isShow"
          />
          <span class="map-output__view--name">
            {{ `${mapMame === "china" ? "钢结构加工量(万吨)" : "增长率"}` }}
          </span>
        </div>
        <div class="map-output__view"></div>
      </div>
      <div class="resource-map__center">
        <div class="resource-map__center__unit">
          <div
            @click="unitActive(item)"
            :class="['unit-view', item.id == activeId && 'unit-view-active']"
            v-for="item in unitList"
            :key="item.id"
          >
            <hb-svg-icon
              :name="item.icon"
              :class="['svg-back', 'icon-svg']"
              :color="item.id == activeId ? '#1678ff' : '#4e5969'"
              width="20"
              height="20"
            ></hb-svg-icon>
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="map-view">
          <div v-if="params !== null" class="map-naviga">
            <span class="map-china" @click="showChina">中国</span>
            <i class="iconfont icon-xiangyou"></i>
            <span>{{ params.name }}</span>
          </div>
          <map-view
            v-if="mapMame == 'china'"
            ref="chinaMap"
            @toCities="toCities"
            :activeName="activeName"
          />
          <EchartsCities v-else :params="params" :activeName="activeName" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import mapView from "./echarts.vue";
import EchartsCities from "./echarts-cities.vue";
import StatiStic from "./statistic.vue";
import { mapData, unitList, citiesData } from "./constants";
import { chainData } from "./busData";
import { useScrollEvent } from "@/hooks/use-scroll-event";
//
const chinaMap = ref<any>();
const isShow = ref(false);
const activeId = ref<string>("un001");
const activeName = ref<string>("设计院");
const unitActive = (item: any) => {
  activeId.value = item.id;
  activeName.value = item.name;
  isShow.value = false;
  chinaMap.value.init("china", item.name, chainData);
  setTimeout(() => {
    isShow.value = true;
  }, 10);
};
const handleScrollBack = () => {
  if (scrollTop.value > 1000) {
    // console.log("滚动距离", scrollTop.value);
    isShow.value = true;
  }
};
const { scrollTop } = useScrollEvent(handleScrollBack);

const mapMame = ref("china");
const params = ref<any>(null);
const citiesOutputValue = ref<Array<any>>([]);
const toCities = (val: any) => {
  citiesOutputValue.value = citiesData.filter((item) => item.name === val.name);
  if (citiesOutputValue.value.length !== 0) {
    params.value = val;
    mapMame.value = "province";
    isShow.value = false;
    setTimeout(() => {
      isShow.value = true;
    }, 10);
  }
};
const showChina = () => {
  mapMame.value = "china";
  params.value = null;
  isShow.value = false;
  setTimeout(() => {
    isShow.value = true;
    console.log("output", output);
  }, 10);
};
const output = computed(() => {
  if (mapMame.value === "china") {
    return mapData.outputValue;
  }
  const objs = citiesOutputValue.value[0];
  return {
    capacity: objs.outputValue, //产能(万吨)
    outputValue: objs.proportion, //产值(万元)
    processingQuantity: objs.increase, //钢结构加工量(万吨)
  };
});
</script>

<style lang="scss" scoped>
.resource-map {
  width: 100%;
  height: 936px;
  box-sizing: border-box;
  background: #f7f9ff;
  padding-top: 48px;
  .resource-map__view {
    width: 1280px;
    margin: 0 auto;
    text-align: center;
    .map-name {
      font-size: 36px;
      color: #172b4d;
      margin-bottom: 12px;
    }
    .map-text {
      font-size: 18px;
      color: #7a869a;
      margin-bottom: 36px;
    }
    .map-output {
      min-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      .map-output__view {
        height: 87px;
        flex: 1;
        text-align: center;
        .map-output__view--name {
          color: #4e5969;
          font-size: 16px;
        }
      }
      .map-output__view:nth-child(3) {
        margin: 0 100px;
      }
    }
  }
  .resource-map__center {
    display: flex;
    .resource-map__center__unit {
      text-align: left;
      .unit-view {
        width: 250px;
        height: 77px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;
        cursor: pointer;
        font-size: 20px;
        border-radius: 8px 8px 8px 8px;
        .icon-svg {
          margin-right: 24px;
        }
        &:hover {
          background: #fff;
          color: #1678ff;
          box-shadow: 0px 6px 24px 0px rgba(164, 159, 159, 0.15);
        }
      }
      .unit-view-active {
        background: #fff;
        color: #1678ff;
        box-shadow: 0px 6px 24px 0px rgba(164, 159, 159, 0.15);
      }
    }
    .map-view {
      flex: 1;
      position: relative;
      .map-naviga {
        position: absolute;
        left: 100px;
        top: 20px;
        display: flex;
        align-items: center;
        z-index: 1;
        span {
          cursor: pointer;
        }
        .map-china {
          &:hover {
            color: #1678ff;
          }
        }
      }
    }
  }
}
:deep(.el-statistic__number) {
  font-family: "DIN Condensed-Bold";
  font-size: 50px;
  color: #1678ff;
}
</style>
